<style type="text/css">
    #danhsach{ 
        width: 600px; height: 500px; padding-top: 10px;
        background: gray; overflow: scroll;
    }
    #danhsach table{border-collapse:collapse; margin: 0 auto;}
    #danhsach td{ border: 1px solid #000; padding: 5px;}
    
</style>

<script type="text/javascript">       
    function loc_khoa(value)
    {
        $.ajax({
            url: "quanlygv/ajax_list.php",
            type: "POST",
            data: {action: 'khoa', value: value},
            success: function(result){
                $('#danhsach').html(result);
            }
        })
    }    
</script>

<div id="function">
    DANH SÁCH GIẢNG VIÊN
</div>

<div id="function_content" style="float: left;">
    <div id="danhsach" style="background: #fff;">
        <table>
            <tr style="background: #247CB9;">
                <td style="width: 100px; text-align: center; color: #fff;">Mã GV</td>
                <td style="width: 200px; text-align: center; color: #fff;">Họ tên</td>
                <td style="width: 100px; text-align: center; color: #fff;">Năm sinh</td>
                <td style="width: 50px; text-align: center; color: #fff;">Giới tính</td>
                <td style="width: 50px; text-align: center; color: #fff;">Khoa</td>
            </tr>
        <?php
            $sql = mysql_query("SELECT * FROM giaovien");
            while($rows = mysql_fetch_assoc($sql))
            {
        ?>
                 <tr>
                 <td style="text-align: center;"><div class="chon_ms" onclick="xemthongtin('<?php echo $rows['MAGIAOVIEN']; ?>')">
                        <?php echo $rows['MAGIAOVIEN']; ?></div></td>
                 <td><?php echo $rows['HOTEN']; ?></td>
                 <td style="text-align: center;"><?php echo $rows['NGAYSINH']; ?></td>
                 <td style="text-align: center;"><?php echo ($rows['GIOITINH'] == 0)?'Nam':'Nữ'; ?></td>
                 <td><?php echo $rows['MAKHOA'] ?></td>
                 </tr>
        <?php } ?>
        </table> 
    </div>        
</div>

<div id="form" style="float: left; margin: 10px; margin-left: 30px;">        
    <form name="xem_theokhoa" action="" onsubmit="return false;">
    <table>
        <tr>
            <td colspan="2"><span style="color: red;"><i>Chọn khoa cần xem:</i></span></td>
        </tr>        
        <tr>
            <td class="label">Khoa: </td>
            <td class="value">
                <select name="khoa" onclick="loc_khoa($(this).val())">
                    <option value="ALL">Tất cả</option>
                    <option value="">Không</option>
                    <option value="NT">Mạng máy tính</option>
                    <option value="CE">Kỹ thuật máy tính</option>
                    <option value="SE">Công nghệ phần mềm</option>
                    <option value="IS">Hệ thống thông tin</option>
                    <option value="CS">Khoa học máy tính</option>
                </select>
            </td>
            <td></td>
        </tr>      
    </table>
    </form>
</div>